<template>
    <BaseDialog :title="title" :handleCancel="handleCancel" :handleOk="handleOk" width="1000px"
        v-model:dialogVisible="props.dialogVisible" :footer="true">
        <div class="dialog__body">
            <div class="left">
                <div class="use_titile">选择线路</div>
                <el-form ref="ruleFormRef" :model="searchParams" style="padding: 16px 16px 0 16px" :inline="true"
                    label-width="0px">
                    <el-form-item>
                        <el-input style="width: 160px" v-model="searchParams.lineName" placeholder="请输入供电线路名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-select style="width: 160px" v-model="searchParams.powerId" filterable placeholder="请选择供电单位"
                            @change="changePower" clearable>
                            <el-option v-for="item in powerSupplyIdList" :key="item.value" :value="item.value"
                                :label="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">
                            <el-icon>
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button @click="resetForm">
                            <el-icon>
                                <RefreshLeft />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-table border ref="multipleTableRef" v-loading="loading" element-loading-text="加载中..." :data="list"
                    height="320px" @select="handleSelectionChange" @select-all="selectAll" :row-key="getRowKeys">
                    <el-table-column :reserve-selection="true" type="selection" width="55" />
                    <el-table-column prop="lineName" label="供电线路名称" width="200px" />
                    <el-table-column prop="powerDtoList" label="供电单位" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-if="scope.row.powerDtoList">
                                {{ scope.row.powerDtoList.map((n) => n.powerName).join('、') }}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

                <Pages style="margin-top: 10px" v-model:page="page" :small="true" :getTableData="getTableData"></Pages>
            </div>
            <div class="right">
                <div class="use_titile">已选择</div>
                <el-scrollbar class="scrollBox" style="height: 400px">
                    <div v-for="(n, i) in selectList" :key="i" class="selectList" style="margin-top:5px">
                        <el-tag type="info" closable @close="handleClose(n)">
                            {{ n.lineName }}
                        </el-tag>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </BaseDialog>
</template>
  
<script setup lang="ts">
import { basicConfigService } from '@/api/basicConfig'

import { commonService } from '@/api/common'
import { ElTable } from 'element-plus'
import { powerService } from '@/api/power'
import { lineService } from '@/api/line'

const props = defineProps({
    dialogVisible: {
        type: Boolean,
    },
    item: {
        type: Object,
    },
    handleSearch: {
        type: Function,
    },
    showManager: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
    },
    type: {
        type: Number,
    },
    lineDtoList: {
        type: Array,
    },
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
let list = reactive([])
const checkAll = ref(false)
const selectList = ref([]);
const handleSelectionChange = (rows, row) => {
    console.log(rows, row)
    if (rows.findIndex((e) => e.lineId === row.lineId) > -1) {
        selectList.value.push(row)
    } else {
        let key = 'lineId'
        selectList.value = selectList.value.filter((v) => v[key] != row[key])
    }
}
const selectAll = (rows) => {

    const key = 'lineId'
    if (rows.length > 0) {
        const selectSet = selectList.value.map((item) => item[key])
        list.forEach((item) => {
            if (!selectSet.includes(item[key])) selectList.value.push(item)
        })
    } else {
        list.forEach((item) => {
            for (let index = 0; index < selectList.value.length; index++) {
                if (selectList.value[index][key] == item[key]) {
                    selectList.value.splice(index, 1)
                }
            }
        })
    }
}
const handleClose = (e) => {
    selectList.value = selectList.value.filter((x) => x.lineId !== e.lineId)
    filterList();
}

const activeName = ref(1)
const lineIdList = ref([])
const powerSupplyIdList = ref([])



const loading = ref(false)

const page = reactive({
    pageSize: 10,
    currentPage: 1,
    total: 0,
})
const searchParams = ref({
    lineName: '',
    powerId: '',
})

const getTableData = async (e) => {
    let data = {
        data: {
            ...searchParams.value,
        },
        pageSize: page.pageSize,
        pageNumber: page.currentPage,
    }
    list = []
    loading.value = true
    try {
        let res
        res = await lineService.getLinePageList(data)
        list = res.data.content
        page.total = res.data.total * 1
        // filterList(iSarea.value ? 'areaId' : 'communityId')
        filterList()
        loading.value = false
    } catch (error) {
        loading.value = false
        list = []
    }
}
const filterList = () => {
    // if (key == 'areaId') selectCommunity.value = []
    const key = 'lineId'
    nextTick(() => {
        multipleTableRef.value!.clearSelection()
    })
    list.forEach((row) => {
        if (selectList.value.findIndex((v) => row[key] == v[key]) > -1) {
            console.log(1000)
            nextTick(() => {
                multipleTableRef.value!.toggleRowSelection(row, true)
            })
        }
    })
}
const handleSearch = () => {
    page.currentPage = 1
    getTableData(activeName.value)
}

const emit = defineEmits(['update:dialogVisible', 'update:lineDtoList'])
const handleOk = (data) => {

    emit('update:lineDtoList', selectList.value)
    handleCancel()
}

const handleCancel = () => {
    emit('update:dialogVisible', false)
}
const optionsMange = ref([])
const getAllManager = () => {
    basicConfigService.getAllManager({ data: {} }).then((res) => {
        optionsMange.value = res.data.map((n) => {
            return {
                label: n.managerName,
                value: n.managerId,
            }
        })
    })
}
onMounted(() => {
    getTableData(activeName.value)

    getPowerList()
    getAllManager()
})
const resetForm = () => {
    searchParams.value = {
        lineName: '',
        powerId: '',
    }
    getTableData(activeName.value)

}
const getPowerList = () => {
    powerService.getPowerList({ data: {} }).then((res) => {
        powerSupplyIdList.value = res.data.map((n) => {
            return {
                label: n.powerName,
                value: n.powerId,
            }
        })
    })
}


const getRowKeys = (row) => {
    return row.lineId
}
</script>
<style lang="scss" scoped>
.dialog__body {
    display: flex;

    .left {
        width: 650px;
    }

    .right {
        flex: 1;
        width: 0;
        border-left: 1px solid #ccc;
        padding-left: 10px;
    }
}
</style>
  